<template>
  <el-container class="reportNameEditContainer">
    <el-header>
      <h3>请输入报表名称</h3>
    </el-header>

    <el-main style="display:flex;flex-direction:column;height:100%">
      <el-form style="height:100%;max-width:800px" label-position="left" label-width="120px">
        <el-form-item label="报表名称">
          <el-input v-model="reportInfo.reportName" placeholder="请输入报表名称"></el-input>
        </el-form-item>

         <el-form-item label="报表描述">
          <el-input v-model="reportInfo.reportDesc" placeholder="请输入报表描述"></el-input>
        </el-form-item>
      </el-form>


            
      <el-row type="flex" justify="end">
          <el-button type="primary" @click="nextStep"> 下一步<i class="el-icon-arrow-right el-icon--right"></i></el-button>
      </el-row>

    </el-main>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      reportInfo:{
        reportDesc:"",
        reportName: ""
      }
    };
  },
  methods:{

      nextStep(){
          if(this.reportInfo.reportName == ""){
                this.$notify.error({
                title: "失败",
                message: "请输入报表名称"
                });
          }else{
            this.$router.push({
              path:'/templateSelect',
              query:{reportInfo:this.reportInfo}
            });
          }
      }
  }
};
</script>

<style>

    .reportNameEditContainer{
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column
    }

</style>
